<template>
  <!-- 季度选择时间控件 -->
  <div class="quarterdatepicker" :class="IsPC ? '': 'mobile-quarterdatepicker'">
    <span>
      <mark
        v-show="showSeason"
        style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
        @click.stop="showSeason=false"
      />
      <el-input
        :value="showValue"
        v-bind="$attrs"
        :clearable="true"
        @clear="clearClick"
        @focus="()=>{showSeason=true}"
      >
        <i slot="prefix" class="el-input__icon el-icon-date" />
      </el-input>
      <el-card
        v-show="showSeason"
        class="box-card"
        style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
      >
        <div slot="header" class="firstBtn">
          <button
            type="button"
            aria-label="前一年"
            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
            @click="prev"
          />
          <span role="button" class="el-date-picker__header-label">{{ year }}年</span>
          <button
            type="button"
            aria-label="后一年"
            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
            @click="next"
          />
        </div>
        <div class="text container">
          <!-- 如下，绑定class,disabled为禁止选择的时间的设置 -->
          <el-button
            type="text"
            size="medium"
            :class="{'colorDis':isDisable(1)}"
            :disabled="isDisable(1)"
            style="width:47%;color: #606266;float:left;"
            @click="selectSeason(0)"
          >第一季度
          </el-button>
          <el-button
            type="text"
            size="medium"
            :class="{'colorDis': isDisable(2)}"
            :disabled="isDisable(2)"
            style="float:right;width:47%;color: #606266;"
            @click="selectSeason(1)"
          >第二季度
          </el-button>
        </div>
        <div class="item container" style="text-align:center;">
          <el-button
            type="text"
            size="medium"
            :class="{'colorDis':isDisable(3)}"
            :disabled="isDisable(3)"
            style="width:47%;color: #606266;float:left;"
            @click="selectSeason(2)"
          >第三季度
          </el-button>
          <el-button
            type="text"
            size="medium"
            :class="{'colorDis': isDisable(4)}"
            :disabled="isDisable(4)"
            style="float:right;width:47%;color: #606266;"
            @click="selectSeason(3)"
          >第四季度
          </el-button>
        </div>
      </el-card>
    </span>
  </div>
</template>
<script>
import moment from 'moment'
import { IsPC } from '@/utils'
moment.locale('zh-cn')
export default {
  name: 'QuarterDatePicker',
  props: {
    valueArr: {
      default: () => {
        return ['01-03', '04-06', '07-09', '10-12']
      },
      type: Array
    },
    getValue: {
      default: val => {
        return val
      },
      type: Function
    },
    isStart: {
      default: false,
      type: Boolean
    },
    isEnd: {
      default: false,
      type: Boolean
    },
    startSeason: {
      default: '',
      type: String
    },
    endSeason: {
      default: '',
      type: String
    },
    isRightTime: { // 是否限制可选择今天后的时间
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      IsPC: IsPC(),
      showSeason: false,
      season: '',
      year: new Date().getFullYear(), // input显示时间，会随着用户操作改变
      showValue: ''
    }
  },
  computed: {
  },
  watch: {
    showValue: {
      immediate: true,
      handler(va) {
        console.log(va)
      }
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    clearClick() {
      this.showValue = ''
      this.$emit('chooseSeason', this.showValue)
    },
    isDisable(quarter) {
      const _year = moment().year()
      const _quarter = moment().quarter()

      if (!this.isRightTime) {
        return false
      }

      if (this.year > _year) {
        return true
      }
      if (this.year === _year) {
        if (quarter > _quarter) return true
      }

      if (this.isEnd) {
        const _tempQ = moment(this.startSeason).quarter()
        const _tempY = moment(this.startSeason).year()
        if (this.year < _tempY) return true
        if (this.year === _tempY) {
          if (quarter < _tempQ) return true
        }
      } else {
        const _tempQ = moment(this.endSeason).quarter()
        const _tempY = moment(this.endSeason).year()
        if (this.year > _tempY) return true
        if (this.year === _tempY) {
          if (quarter > _tempQ) return true
        }
      }
      return false
    },
    prev() {
      this.year = this.year * 1 - 1
    },
    next() {
      this.year = this.year * 1 + 1
    },
    selectSeason(i) {
      if (this.isDisable(i + 1)) { return false }
      this.season = i + 1
      const arr = this.valueArr[i].split('-')
      const seasonValue = this.getValue(this.year + '-' + arr[0] + '-' + '01')
      this.showSeason = false
      this.showValue = `${this.year}第${this.season}季度`
      this.$emit('chooseSeason', seasonValue) // 每次选择时间都将当前选择时间发送到父组件
    }
  }
}

</script>

<style lang="scss" scoped>
/deep/ .el-input__suffix{
  position: absolute;
  z-index: 10001;
}
.mobile-quarterdatepicker{
  .is-always-shadow{
    right: 0;
  }
}
.quarterdatepicker {
  display: inline;
  .firstBtn {
    height: 30px;
    line-height: 34px;
    width: 100%;
    text-align: center;
  }
  .text {
    text-align: center;
    margin: 15px 0 10px;
  }
  .item {
    text-align: center;
  }
}
.colorDis {
  color: #999 !important;
}
</style>
<style lang="scss">
.quarterdatepicker {
  .el-card__header {
    padding: 12px;
  }
}

</style>

